<template>
  <div class="size-bar">
      <el-scrollbar style="height: 100%;">
        <ul class="main-menu">
            <li class="menu-item" v-for="item in menu" :key="item.id" >
                <!-- 大标签 -->
                <a :class="['bigLabel', item.id === isBigClick ? 'isBigClick' : '']" @click="selectBigLabel(item)">
                    <i :class="['hotel-management-icon', item.icon]" ></i>
                    <span>{{item.name}}</span>
                    <template v-if="!item.destination">
                        <i class="el-icon-arrow-right" v-if="item.id !== isBigClick"></i>
                        <i class="el-icon-arrow-down" v-else></i>
                    </template>
                </a>

                <!-- 小标签 -->
                <ul class="children" v-show="item.id === isBigClick">
                    <li :class="['children-item', childrenItem.id === isSmallClick ? 'isSmallClick' : '']" v-for="childrenItem in item.children" :key="childrenItem.id" @click="selectChildLabel(childrenItem)">
                        <router-link :to="childrenItem.destination" >
                            <i :class="['hotel-management-icon', childrenItem.icon]" ></i>
                            <span>{{childrenItem.name}}</span>
                        </router-link>
                    </li>
                </ul>
            </li>
        </ul>
      </el-scrollbar><!-- /滚动条 -->
      
      <div class="author">
          <i class="hotel-management-icon icon-zuozhe"></i>
          <div class="profile">
            <img src="@/assets/images/闲云.jpg">
            <img src="@/assets/images/嗯哼.jpg">
            <img src="@/assets/images/ALKRay.jpg">
            <img src="@/assets/images/You~.jpg">
          </div>
      </div>
  </div>
</template>

<script>
import { memberMixin } from '@/utils/mixins/member.js'
export default {
    mixins : [ memberMixin ],
    name: "Size-bar",
    data() {
        return {
            isBigClick: -1, //选中的大标签
            isSmallClick: -1, //选中的小标签,
            manager: [
                { 
                    id: 0, name: "宾馆管理", icon: "icon-binguan", destination: null, style:{fontSize:"1.4rem"},
                    children:[
                        {id:10, name: "房型", icon: "icon-fangxing", destination: "/main/Room-type"},
                        {id:11, name: "房间", icon: "icon-fangjian1", destination: "/main/Room"},
                    ] 
                },
                { id: 1, name: "房间管理", icon: "icon-fangjian1", destination: "/main/Room-management"  },
                { id: 2, name: "预订管理", icon: "icon-yuding", destination: "/main/Booking-management"  },
                { id: 3, name: "入住管理", icon: "icon-ruzhuren", destination: "/main/Check-in-management" },
                { id: 4, name: "会员管理", icon: "icon-huiyuan1", destination: "/main/Member-management"  },
                { 
                    id: 5, name: "商品管理", icon: "icon-shangpinsku", destination: null, style:{fontSize:"1.2rem"},
                    children:[
                        {id: 12, name: "库存", icon: "icon-kucun", destination: "/main/Inventory", style:{fontSize:"1rem"}},
                        {id: 13, name: "销售", icon: "icon-xiaoshou", destination: "/main/Sales", style:{fontSize:"1rem"}},
                        {id: 15, name: "进货", icon: "icon-jinhuo", destination: "/main/Stock", style:{fontSize:"1rem"}}
                    ]    
                },
                { 
                    id: 6, name: "营业管理", icon: "icon-baobiao", destination: null, style:{fontSize:"1.2rem"},
                    children:[
                        {id: 12, name: "报表", icon: "icon-baobiao", destination: "/main/Accouting", style:{fontSize:"1rem"}},
                    ]    
                },
            ],
            accounting : [
                { 
                    id: 5, name: "商品管理", icon: "icon-shangpinsku", destination: null, style:{fontSize:"1.2rem"},
                    children:[
                        {id: 13, name: "销售", icon: "icon-xiaoshou", destination: "/main/Sales", style:{fontSize:"1rem"}},
                    ]    
                },
                { 
                    id: 6, name: "营业管理", icon: "icon-baobiao", destination: null, style:{fontSize:"1.2rem"},
                    children:[
                        {id: 12, name: "报表", icon: "icon-baobiao", destination: "/main/Accouting", style:{fontSize:"1rem"}},
                    ]    
                },
            ],
            frontdesk : [
                { id: 1, name: "房间管理", icon: "icon-fangjian1", destination: "/main/Room-management"  },
                { id: 2, name: "预订管理", icon: "icon-yuding", destination: "/main/Booking-management"  },
                { id: 3, name: "入住管理", icon: "icon-ruzhuren", destination: "/main/Check-in-management" },
                { id: 4, name: "会员管理", icon: "icon-huiyuan1", destination: "/main/Member-management"  },
                { 
                    id: 5, name: "商品管理", icon: "icon-shangpinsku", destination: null, style:{fontSize:"1.2rem"},
                    children:[
                        {id: 12, name: "库存", icon: "icon-kucun", destination: "/main/Inventory", style:{fontSize:"1rem"}},
                        {id: 13, name: "销售", icon: "icon-xiaoshou", destination: "/main/Sales", style:{fontSize:"1rem"}},
                    ]    
                },
            ],
        }
    },
    methods: {
        selectBigLabel(item) {
            //第二次点击收起
            if(item.id === this.isBigClick) {
                this.isBigClick = -1
                return
            }

            if(item.destination) this.$router.push(item.destination)
            this.isBigClick = item.id
        },
        selectChildLabel(item) {
            this.isSmallClick = item.id
        }
    },
    computed: {
        menu : function() {
            switch(this.memNumber) {
                case '0': return this.manager;
                case '1': return this.accounting;
                case '2': return this.frontdesk;
            }
            return []
        }
    },
}
</script>


<style lang="less" scoped>
.size-bar{
    width: 300px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 6rem;
    background-color: #ffffff;
    // border-top:solid 1px  #ccc;
    padding-top: 30px;
    z-index: 13;
    .main-menu{
        list-style: none;
        padding: 0;
        .menu-item{
            box-sizing: border-box;
            width: 100%;
            line-height: 3.5rem;
            padding-left: 15px;
            padding-right: 15px; 
            &:hover a.bigLabel{
                color: #7366ff;
            }
            .bigLabel{
                text-decoration: none;
                display: flex;
                height: 3.5rem;
                align-items: center;
                padding-left: 20px;
                padding-right: 20px;
                color: #aa97b0;
                font-size: 1.2rem;
                .hotel-management-icon{
                    font-size: 1.2rem;
                }
                i{
                    padding-right: 1.5rem;
                }
                .el-icon-arrow-right,
                .el-icon-arrow-down{
                    display: inline-block;
                    position: absolute;
                    right: 0;
                }
                
            }
            .children{
                list-style: none;
                font-size: 1rem;
                padding: 0;
                color: #aa97b0;
                .children-item{
                    width: 100%;
                    box-sizing: border-box;
                    padding-left: 30%;
                    a{
                        width: 70%;
                        display: inline-flex;
                        justify-content: flex-start;
                        text-decoration: none;
                        color: inherit;
                        i{
                            margin-right: 20px;
                            font-size: inherit;
                        }
                    }
                    &:hover a,
                    &:hover .hotel-management-icon{
                        color: #7366ff;
                        font-size: 1.2rem;
                    }
                }
                .isSmallClick{
                    background-color: #f8f8f8;
                    color: #7366ff;
                    font-size: 1.2rem;
                }
            }
            .isBigClick{
                background-color: #f8f8f8;
                color: #7366ff;
            }
        }
    }
    .author{
        width: 300px;
        display: flex;
        align-items: center;
        height: 3.5rem !important;
        position: inherit;
        justify-content: flex-start;
        bottom: 0;
        box-sizing: border-box;
        padding-left: 20px;
        i{
            font-size: 1.5rem;
        }
        .profile{
            margin-left: 15px;
            display: flex;
            align-items: center;
            img{
                margin-left: 5px;
                height: 2rem;
                border-radius: 50%;
            }
        }
    }
}
</style>